<template>
  <div class="editor-container">
    <form @submit.prevent="onSubmit" class="editor-form">
      <input v-model="form.title" placeholder="标题" class="input" />
      <quill-editor
        v-model="form.content"
        :options="editorOptions"
        class="quill-editor"
      />
      <select v-model="form.category_id" class="input">
        <option v-for="cat in categories" :key="cat.id" :value="cat.id">{{ cat.name }}</option>
      </select>
      <input v-model="form.tags" placeholder="标签（逗号分隔）" class="input" />
      <button type="submit" class="btn">发布</button>
    </form>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  components: { quillEditor },
  data() {
    return {
      form: { title: '', content: '', category_id: '', tags: '' },
      categories: [],
      editorOptions: {
        placeholder: '请输入文章内容...',
        theme: 'snow'
      },
      mockCategories: [
        { id: 1, name: '前端开发' },
        { id: 2, name: '后端开发' },
        { id: 3, name: '生活' }
      ]
    }
  },
  methods: {
    fetchCategories() {
      // TODO: 替换为真实接口请求
      // this.$http.get('/api/categories').then(res => { this.categories = res.data })
      setTimeout(() => {
        this.categories = this.mockCategories
      }, 300)
    },
    onSubmit() {
      // TODO: 替换为真实接口请求
      // this.$http.post('/api/articles', this.form).then(() => { ... })
      setTimeout(() => {
        alert('发布成功 (模拟)')
      }, 300)
    }
  },
  mounted() {
    this.fetchCategories()
  }
}
</script>

<style scoped>
.editor-container {
  display: flex;
  justify-content: center;
}
.editor-form {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(66,185,131,0.08);
  padding: 36px 32px 28px 32px;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  font-size: 1rem;
  outline: none;
  transition: border 0.2s;
}
.input:focus {
  border: 1.5px solid #42b983;
}
.quill-editor {
  min-height: 200px;
  margin-bottom: 18px;
}
.btn {
  width: 100%;
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 0;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.2s;
}
.btn:hover {
  background: #1890ff;
}
</style> 